<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title><h:outputText value="#{tagen.titleEmpleado}" /></title>
	<h:outputStylesheet library="css" name="styles.css" />
	<h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />
</h:head>

<h:body>
	<h:form id="pcliente">
		<ui:composition template="/plantillas/plantilla.xhtml">
			<ui:define name="body">
				<h:form>
					<br />
					<p:panelGrid columns="1">
						<f:facet name="header">
							<p:row>
								<p:column>
									<p:outputLabel value="#{tagen.titleEmpleado}" />
								</p:column>
								<p:column>
									<p:spacer width="1250" height="1" />
								</p:column>
							</p:row>
						</f:facet>
					</p:panelGrid>
					<p:panelGrid columns="1" styleClass="table-out">
						<p:row>
							<p:column>
								<center>
									<p:panelGrid styleClass="table-in">

										<p:row>
											<p:column colspan="2">
												<h1>
													<p:outputLabel value="Datos del Empleado" />
												</h1>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Nombres y Apellidos" />
											</p:column>
											<p:column>
												<p:inputText value="#{tagen.empleado.agenom}" size="40" />
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Dirección" />
											</p:column>
											<p:column>
												<p:inputText value="#{tagen.empleado.agedir}" size="40" />
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Departamento" />
											</p:column>
											<p:column>
												<p:selectOneMenu id="departamento"
													value="#{tagen.departamento.codigo}" style="width:150px"
													height="100" filter="true" filterMatchMode="startsWith">
													<p:ajax listener="#{tagen.onDepartamentoChange}"
														update="provincia" />
													<f:selectItem itemLabel="Seleccione" itemValue="" />
													<f:selectItems value="#{tagen.listadoDepartamentoItem}" />
												</p:selectOneMenu>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Provincia" />
											</p:column>
											<p:column>
												<p:selectOneMenu id="provincia"
													value="#{tagen.provincia.codigo}" style="width:150px"
													height="100" filter="true" filterMatchMode="startsWith">
													<p:ajax listener="#{tagen.onProvinciaChange}"
														update="distrito" />
													<f:selectItem itemLabel="Seleccione" itemValue="" />
													<f:selectItems value="#{tagen.listadoProvinciaItem}" />
												</p:selectOneMenu>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Distrito" />
											</p:column>
											<p:column>
												<p:selectOneMenu id="distrito"
													value="#{tagen.distrito.codigo}" height="100" filter="true"
													filterMatchMode="startsWith">
													<f:selectItem itemLabel="Seleccione" itemValue="" />
													<f:selectItems value="#{tagen.listadoDistritoItem}" />
												</p:selectOneMenu>
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Teléfono" />
											</p:column>
											<p:column>
												<p:inputText value="#{tagen.empleado.agete1}" type=""
													size="40" />
											</p:column>
										</p:row>

										<p:row>
											<p:column>
												<p:outputLabel value="Tipo" />
											</p:column>
											<p:column>
												<p:selectOneMenu id="tipo" value="#{tagen.tipoEmpleado.codigo}">
													<f:selectItem itemLabel="Seleccione" itemValue="" />
													<f:selectItem itemLabel="VENDEDOR" itemValue="01" />
													<f:selectItem itemLabel="ADMINISTRADOR" itemValue="02" />
												</p:selectOneMenu>
											</p:column>
										</p:row>

										
										<p:row>
											<p:column colspan="2">
												<center>
													<p:commandButton value="Aceptar"
														action="#{tagen.registrar}" update="growl">
													</p:commandButton>
													<p:commandButton value="Cancelar"
														action="#{tagen.cancelar}" />
												</center>
											</p:column>
										</p:row>

									</p:panelGrid>

									<p:growl id="growl" showDetail="true" sticky="true" />
								</center>
							</p:column>
						</p:row>
					</p:panelGrid>
				</h:form>
			</ui:define>
		</ui:composition>
	</h:form>
</h:body>
</html>